<script setup lang="ts">
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { useRoute, useRouter } from 'vue-router'
  import { computed } from 'vue'

  defineOptions({
    name: 'HeaderReturnFacoryCreate',
  })

  const emits = defineEmits<{
    (e: 'submit'): void
  }>()

  // 标签状态管理
  const tagsViewStore = useTagsViewStore()

  // 激活路由对象
  const route = useRoute()

  // 全局路由对象
  const router = useRouter()

  /**
   * 取消
   */
  const onCancel = () => {
    tagsViewStore.delView(route.path)
    router.back()
  }

  // 页面标题
  const title = computed(() => {
    if (route.name === 'updateReturnFactory') {
      return '修改返厂'
    }
    return '新建返厂'
  })
</script>

<template>
  <div class="new-return-factory-header">
    <div class="title">{{ title }}</div>
    <div class="btn_group">
      <h-plain-button @click="emits('submit')">提交</h-plain-button>
      <h-button @click="onCancel">取消</h-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .new-return-factory-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 14px;
      font-weight: bold;
    }

    .btn_group {
      display: flex;
      column-gap: 5px;
    }
  }
</style>
